@extends('admin.layout.base')

@section('content')

    <div class="layui-card">

        <table class="layui-hide" id="tableData" lay-filter="myTable"></table>

        <script type="text/html" id="toolbarDemo">
            <input class="layui-input" id="edtSearch" value="" placeholder="输入关键字" style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
            <div class="layui-btn-container" style="display: inline-block;">
                <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe615;</i>搜索
                </button>
                <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#x1006;</i>清除
                </button>
                <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary" style="display: none">
                    <i class="layui-icon">&#xe668;</i>展开全部
                </button>
                <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe66b;</i>折叠全部
                </button>
                <button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe669;</i>刷新
                </button>

                @can('power.create')
                <button id="btnAdd" data-url="{{route("power.create")}}" class="layui-btn layui-btn-primary layui-btn-sm">添加</button>
                @endcan
            </div>
        </script>

        <script type="text/html" id="type">
            @{{#  if(d.type === '菜单'){ }}
            <span style="color: #F581B1;">@{{ d.type }}</span>
            @{{#  } else { }}
            @{{ d.type }}
            @{{#  } }}
        </script>

        <script type="text/html" id="admin">
            @{{d.get_admin.name}}
        </script>

        <script type="text/html" id="options">
            <div class="layui-btn-group">
                @can('power.edit')
                <a data-url="{{route("power.edit")}}" lay-event="edit" class="layui-btn layui-btn-xs layui-btn-normal">编辑</a>
                @endcan
                @can('power.delete')
                <a data-url="{{route("power.delete")}}" lay-event="del" class="layui-btn layui-btn-xs layui-btn-danger">删除</a>
                @endcan
            </div>
        </script>

    </div>

@endsection

@section('script')
    <script>
        layui.use(['jquery', 'treeTable'], function () {
            $ = layui.jquery;
            var treeTable = layui.treeTable;
            var insTb = treeTable.render({
                elem: '#tableData'
                , url: '{{route("power.list")}}'
                , id: 'myReload'
                ,toolbar: '#toolbarDemo'    //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'print', 'exports']
                , request: {pidName: 'pid'} // 懒加载请求携带的参数名称
                , tree: {
                    iconIndex: 1,           // 折叠图标显示在第几列
                    isPidData: true,        // 是否是id、pid形式数据
                    idName: 'id',           // id字段名称
                    pidName: 'pid'          // pid字段名称
                }
                , cols: [[
                    {field: 'id', title: 'ID', minWidth: 45}
                    , {field: 'name', title: '权限名称', width: 230}
                    , {field: 'route', title: '主路由'}
                    , {field: 'alias', title: '路由别名'}
                    , {field: 'type', title: '类型', toolbar: '#type'}
                    , {field: 'get_admin', title: '操作人员'}
                    , {field: 'sort', title: '排序'}
                    , {field: 'created_at', title: '创建时间', hide: true}
                    , {fixed: 'right', width: 120, title: '操作', align: 'center', toolbar: '#options'}
                ]]
            });

            // 全部展开
            $('#btnExpandAll').click(function () {
                insTb.expandAll();
                $('#btnExpandAll').hide();
                $('#btnFoldAll').show();
            });

            // 全部折叠
            $('#btnFoldAll').click(function () {
                insTb.foldAll();
                $('#btnFoldAll').hide();
                $('#btnExpandAll').show();
            });

            // 搜索
            $('#btnSearch').click(function () {
                var keywords = $('#edtSearch').val();
                if (keywords) {
                    insTb.filterData(keywords);
                } else {
                    insTb.clearFilter();
                }
            });

            // 清除搜索
            $('#btnClearSearch').click(function () {
                insTb.clearFilter();
                $('#edtSearch').val('');
            });

            // 刷新
            $('#btnRefresh').click(function () {
                insTb.refresh();
            });

            //添加
            $('#btnAdd').click(function () {
                var content = $(this).data('url') + '?pid=0';
                openViews(content, '添加');//弹出层
            });

            //监听：编辑-删除
            treeTable.on('tool(tableData)', function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'add') {//添加菜单

                    var content = $(this).data('url') + '?pid=' + data.id;
                    openViews(content, '添加');//弹出层

                } else if (layEvent === 'edit') {//编辑

                    var content = $(this).data('url') + '?id=' + data.id;
                    openViews(content, '编辑');//弹出层

                } else if (layEvent === 'del') {//删除
                    var url = $(this).data('url');
                    layer.confirm('确定要删除吗？', function (index) {
                        $.ajax({
                            url: url, type: 'delete', data: {'id': data.id, '_token': '{{csrf_token()}}'},
                            success: function (result) {
                                if (result.code === 0) {
                                    layer.msg(result.msg, {time: 1000, icon: 6});
                                    obj.del();//删除列表
                                    layer.close(index);//关闭对话框
                                } else {
                                    layer.msg(result.msg, {time: 2000, icon: 5});
                                }
                            }
                        });

                    });

                }
            });

            //弹出层
            function openViews(content, title = '') {
                var area = ['80%', '85%'];
                layer.open({
                    type: 2, title: title, area: area, fixed: false, maxmin: true, shadeClose: true, content: content
                });
            }
        });
    </script>
@endsection